<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准地址完善与审核 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        /* 字段选择样式 */
        .field-select-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .field-select-header {
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .field-select-title {
            font-weight: 500;
            font-size: 16px;
            color: #2c3e50;
        }
        
        .field-select-body {
            padding: 20px;
        }
        
        .field-row {
            display: flex;
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .field-label {
            width: 120px;
            background-color: #f8f9fa;
            padding: 15px;
            font-weight: 500;
            color: #2c3e50;
            border-right: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .field-options {
            display: flex;
            flex: 1;
        }
        
        .field-option {
            flex: 1;
            padding: 15px;
            cursor: pointer;
            position: relative;
            border-right: 1px solid #eee;
            transition: all 0.2s;
        }
        
        .field-option:last-child {
            border-right: none;
        }
        
        .field-option:hover {
            background-color: #f5f7fa;
        }
        
        .field-option.selected {
            background-color: #e3f2fd;
        }
        
        .field-option.selected::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 8px;
            right: 8px;
            color: #3498db;
            font-size: 14px;
        }
        
        .standard-field {
            background-color: #f3e5f5;
            border-left: 2px solid #9c27b0;
        }
        
        .standard-field-input {
            width: 100%;
            border: 1px solid #ddd;
            padding: 8px;
            border-radius: 4px;
            margin-top: 5px;
            background-color: white;
        }
        
        .standard-field-input:focus {
            border-color: #9c27b0;
            outline: none;
            box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.2);
        }
        
        .system-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .system-construction {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .system-heating {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .system-gas {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .system-standard {
            background-color: #f3e5f5;
            color: #9c27b0;
        }
        
        .system-manual {
            background-color: #fafafa;
            color: #607d8b;
            border: 1px dashed #ccc;
        }
        
        .field-value {
            margin-top: 5px;
            color: #2c3e50;
            font-weight: 500;
            word-break: break-all;
        }
        
        /* 详情页面样式 */
        .status-pill {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-pending {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .status-approved {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .status-rejected {
            background-color: #ffebee;
            color: #f44336;
        }
        
        /* 标准地址详情卡片优化样式 */
        .address-info-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .address-header {
            padding: 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
        }
        
        .address-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .address-title h3 {
            font-weight: 500;
            color: #2c3e50;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .address-meta {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .address-id {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .complete-address-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            padding: 12px 15px;
            border-radius: 6px;
            border: 1px solid #eee;
        }
        
        .complete-address {
            font-weight: 500;
            font-size: 16px;
            color: #2c3e50;
            line-height: 1.5;
            flex: 1;
        }
        
        .copy-btn {
            white-space: nowrap;
            margin-left: 10px;
        }
        
        .address-body {
            padding: 20px;
        }
        
        .address-section {
            margin-bottom: 25px;
            background-color: #fff;
            border-radius: 8px;
            border: 1px solid #eee;
            overflow: hidden;
        }
        
        .section-title {
            font-weight: 500;
            margin: 0;
            padding: 15px 20px;
            color: #34495e;
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
        }
        
        /* 地图部分样式 */
        .map-section {
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .map-container {
            height: 220px;
            position: relative;
        }
        
        .map-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .map-overlay {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(255,255,255,0.9);
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.1);
        }
        
        .map-actions {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        .map-info {
            display: flex;
            padding: 15px 20px;
            background-color: #fff;
        }
        
        .map-info-item {
            flex: 1;
            padding: 0 15px;
            border-right: 1px solid #eee;
        }
        
        .map-info-item:last-child {
            border-right: none;
        }
        
        /* 地址组成部分样式 */
        .address-components {
            padding: 15px 20px;
        }
        
        .component-group {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }
        
        .component-group:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .component-item {
            flex: 1;
            min-width: 150px;
            margin-bottom: 5px;
            margin-right: 20px;
        }
        
        .component-label {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .component-value {
            color: #2c3e50;
            font-weight: 500;
        }
        
        /* 地址属性部分样式 */
        .address-attributes {
            padding: 15px 20px;
            display: flex;
            flex-wrap: wrap;
        }
        
        .attribute-item {
            width: 33.33%;
            padding: 10px 15px;
            display: flex;
            flex-direction: column;
        }
        
        .attribute-label {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .attribute-value {
            color: #2c3e50;
            font-weight: 500;
        }
        
        .text-muted {
            color: #95a5a6;
            font-style: italic;
        }
        
        .status-success {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .address-components .component-item {
                flex-basis: 100%;
            }
            
            .address-attributes .attribute-item {
                width: 50%;
            }
        }
        
        @media (max-width: 480px) {
            .address-attributes .attribute-item {
                width: 100%;
            }
        }
        
        /* 标签页样式 */
        .tab-container {
            margin-bottom: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #eee;
        }
        
        .tab {
            padding: 15px 20px;
            cursor: pointer;
            font-weight: 500;
            color: #7f8c8d;
            position: relative;
            transition: all 0.2s;
        }
        
        .tab:hover {
            color: #3498db;
            background-color: #f8f9fa;
        }
        
        .tab.active {
            color: #3498db;
        }
        
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #3498db;
        }
        
        .tab-content {
            padding: 20px;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
        
        /* 审核表单样式 */
        .approve-form {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-title {
            margin-top: 0;
            margin-bottom: 20px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-control {
            width: 100%;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 4px;
            font-family: inherit;
            font-size: inherit;
        }
        
        .form-control:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }
        
        .radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        
        .radio-item input[type="radio"] {
            margin: 0;
        }
        
        /* 历史记录样式 */
        .history-item {
            display: flex;
            margin-bottom: 20px;
            position: relative;
        }
        
        .history-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #e3f2fd;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            z-index: 2;
        }
        
        .history-content {
            flex: 1;
            padding-bottom: 20px;
        }
        
        .history-title {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .history-desc {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .history-date {
            color: #95a5a6;
            font-size: 12px;
            margin-top: 5px;
        }
        
        /* 变更内容样式 */
        .diff-table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        .diff-table th {
            background-color: #f8f9fa;
            text-align: left;
            padding: 10px;
            font-weight: 500;
            border: 1px solid #eee;
        }
        
        .diff-table td {
            padding: 10px;
            border: 1px solid #eee;
        }
        
        .diff-old {
            background-color: #ffebee;
            text-decoration: line-through;
            color: #f44336;
        }
        
        .diff-new {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        /* 数据表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .data-table th {
            background-color: #f8f9fa;
            padding: 12px 15px;
            text-align: left;
            font-weight: 500;
            color: #34495e;
            border-bottom: 1px solid #eee;
        }
        
        .data-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }
        
        .data-table tr:hover {
            background-color: #f5f7fa;
        }
        
        /* 进度条样式 */
        .progress-bar {
            height: 18px;
            background-color: #f1f1f1;
            border-radius: 9px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #4caf50;
            text-align: center;
            line-height: 18px;
            color: white;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 物业信息样式 */
        .property-info {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        /* 信息提示样式 */
        .info-alert {
            display: flex;
            background-color: #e3f2fd;
            border: 1px solid #bbdefb;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .info-alert-icon {
            flex: 0 0 50px;
            font-size: 24px;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .info-alert-content {
            flex: 1;
        }
        
        .info-alert h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #1976d2;
            font-weight: 500;
        }
        
        .info-alert p {
            margin-bottom: 10px;
            color: #37474f;
            line-height: 1.5;
        }
        
        .info-alert ul {
            margin-bottom: 10px;
            padding-left: 20px;
        }
        
        .info-alert li {
            margin-bottom: 5px;
            color: #37474f;
        }
        
        .text-highlight {
            background-color: #fff176;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>标准地址完善与审核</h1>
                <p class="subtitle">完善标准地址字段并进行审核</p>
            </div>
            <div class="buttons-group">
                <button class="btn btn-default" onclick="navigateTo('pending-address-list.html', '待审核地址')">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </button>
                <button class="btn btn-primary" id="saveSelectionsBtn">
                    <i class="fas fa-save"></i> 保存审核结果
                </button>
            </div>
        </header>


        <!-- 添加标准地址字段选择信息提示 -->
        <div class="info-alert">
            <div class="info-alert-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="info-alert-content">
                <h4>如何选择最准确的标准地址字段</h4>
                <p>请从各个系统数据源中选择最准确的地址字段，建议优先选择<span class="text-highlight">住建局</span>提供的规范地址。对于不一致的字段，可根据以下原则处理：</p>
                <ul>
                    <li><strong>表达最规范</strong> - 选择符合国家地址规范的表述方式</li>
                    <li><strong>内容最完整</strong> - 选择信息最完整、详细的字段</li>
                    <li><strong>数据最新</strong> - 优先选择最近更新的数据</li>
                </ul>
                <p>您也可以在标准字段输入框中直接修改或规范字段内容，系统将自动更新标准地址预览。</p>
            </div>
        </div>
        
        <!-- 1. 字段选择卡片移到最上方 -->
        <div class="field-select-container">
            <div class="field-select-header">
                <div class="field-select-title">
                    <i class="fas fa-exchange-alt"></i> 字段选择
                </div>
                <div class="field-actions">
                    <button class="btn btn-sm btn-default" id="resetSelectionsBtn">
                        <i class="fas fa-undo"></i> 重置选择
                    </button>
                </div>
            </div>
            
            <div class="field-select-body">
                <!-- 省份选择 -->
                <div class="field-row">
                    <div class="field-label">省份</div>
                    <div class="field-options">
                        <div class="field-option" id="province-construction" onclick="selectField('province', 'construction', '山东省')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">山东省</div>
                        </div>
                        <div class="field-option" id="province-heating" onclick="selectField('province', 'heating', '山东省')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">山东省</div>
                        </div>
                        <div class="field-option" id="province-gas" onclick="selectField('province', 'gas', '山东省')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">山东省</div>
                        </div>
                        <div class="field-option standard-field" id="province-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="province-standard-input" 
                                   value="山东省" oninput="updateStandardField('province')">
                        </div>
                    </div>
                </div>
                
                <!-- 城市选择 -->
                <div class="field-row">
                    <div class="field-label">城市</div>
                    <div class="field-options">
                        <div class="field-option" id="city-construction" onclick="selectField('city', 'construction', '济南市')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">济南市</div>
                        </div>
                        <div class="field-option" id="city-heating" onclick="selectField('city', 'heating', '济南市')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">济南市</div>
                        </div>
                        <div class="field-option" id="city-gas" onclick="selectField('city', 'gas', '济南市')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">济南市</div>
                        </div>
                        <div class="field-option standard-field" id="city-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="city-standard-input" 
                                   value="济南市" oninput="updateStandardField('city')">
                        </div>
                    </div>
                </div>
                
                <!-- 区县选择 -->
                <div class="field-row">
                    <div class="field-label">区县</div>
                    <div class="field-options">
                        <div class="field-option" id="district-construction" onclick="selectField('district', 'construction', '历下区')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">历下区</div>
                        </div>
                        <div class="field-option" id="district-heating" onclick="selectField('district', 'heating', '历下区')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">历下区</div>
                        </div>
                        <div class="field-option" id="district-gas" onclick="selectField('district', 'gas', '历下区')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">历下区</div>
                        </div>
                        <div class="field-option standard-field" id="district-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="district-standard-input" 
                                   value="历下区" oninput="updateStandardField('district')">
                        </div>
                    </div>
                </div>
                
                <!-- 街道选择 -->
                <div class="field-row">
                    <div class="field-label">街道</div>
                    <div class="field-options">
                        <div class="field-option" id="street-construction" onclick="selectField('street', 'construction', '泉城路街道')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">泉城路街道</div>
                        </div>
                        <div class="field-option" id="street-heating" onclick="selectField('street', 'heating', '泉城路街道')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">泉城路街道</div>
                        </div>
                        <div class="field-option" id="street-gas" onclick="selectField('street', 'gas', '泉城路街道')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">泉城路街道</div>
                        </div>
                        <div class="field-option standard-field" id="street-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="street-standard-input" 
                                   value="泉城路街道" oninput="updateStandardField('street')">
                        </div>
                    </div>
                </div>
                
                <!-- 社区选择 -->
                <div class="field-row">
                    <div class="field-label">社区</div>
                    <div class="field-options">
                        <div class="field-option" id="community-construction" onclick="selectField('community', 'construction', '泉城社区')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">泉城社区</div>
                        </div>
                        <div class="field-option" id="community-heating" onclick="selectField('community', 'heating', '泉城社区')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">泉城社区</div>
                        </div>
                        <div class="field-option" id="community-gas" onclick="selectField('community', 'gas', '泉城社区')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">泉城社区</div>
                        </div>
                        <div class="field-option standard-field" id="community-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="community-standard-input" 
                                   value="泉城社区" oninput="updateStandardField('community')">
                        </div>
                    </div>
                </div>
                
                <!-- 小区/街坊选择 -->
                <div class="field-row">
                    <div class="field-label">小区/街坊</div>
                    <div class="field-options">
                        <div class="field-option" id="neighborhood-construction" onclick="selectField('neighborhood', 'construction', '恒大名都')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">恒大名都</div>
                        </div>
                        <div class="field-option selected" id="neighborhood-heating" onclick="selectField('neighborhood', 'heating', '恒大名都')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">恒大名都</div>
                        </div>
                        <div class="field-option" id="neighborhood-gas" onclick="selectField('neighborhood', 'gas', '中关村科技园')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">中关村科技园</div>
                        </div>
                        <div class="field-option standard-field" id="neighborhood-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="neighborhood-standard-input" 
                                   value="恒大名都" oninput="updateStandardField('neighborhood')">
                        </div>
                    </div>
                </div>
                
                <!-- 楼栋号选择 -->
                <div class="field-row">
                    <div class="field-label">楼栋号</div>
                    <div class="field-options">
                        <div class="field-option" id="building-construction" onclick="selectField('building', 'construction', '8号楼')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">8号楼</div>
                        </div>
                        <div class="field-option" id="building-heating" onclick="selectField('building', 'heating', '8栋')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">8栋</div>
                        </div>
                        <div class="field-option selected" id="building-gas" onclick="selectField('building', 'gas', '8号楼')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">8号楼</div>
                        </div>
                        <div class="field-option standard-field" id="building-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="building-standard-input" 
                                   value="8号楼" oninput="updateStandardField('building')">
                        </div>
                    </div>
                </div>
                
                <!-- 单元号选择 -->
                <div class="field-row">
                    <div class="field-label">单元号</div>
                    <div class="field-options">
                        <div class="field-option" id="unit-construction" onclick="selectField('unit', 'construction', '二单元')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">二单元</div>
                        </div>
                        <div class="field-option selected" id="unit-heating" onclick="selectField('unit', 'heating', '2单元')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">2单元</div>
                        </div>
                        <div class="field-option" id="unit-gas" onclick="selectField('unit', 'gas', '第2单元')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">第2单元</div>
                        </div>
                        <div class="field-option standard-field" id="unit-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="unit-standard-input" 
                                   value="2单元" oninput="updateStandardField('unit')">
                        </div>
                    </div>
                </div>
                
                <!-- 楼层选择 -->
                <div class="field-row">
                    <div class="field-label">楼层</div>
                    <div class="field-options">
                        <div class="field-option selected" id="floor-construction" onclick="selectField('floor', 'construction', '15层')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">15层</div>
                        </div>
                        <div class="field-option" id="floor-heating" onclick="selectField('floor', 'heating', '15楼')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">15楼</div>
                        </div>
                        <div class="field-option" id="floor-gas" onclick="selectField('floor', 'gas', '第15层')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">第15层</div>
                        </div>
                        <div class="field-option standard-field" id="floor-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="floor-standard-input" 
                                   value="15层" oninput="updateStandardField('floor')">
                        </div>
                    </div>
                </div>
                
                <!-- 房间号选择 -->
                <div class="field-row">
                    <div class="field-label">房间号</div>
                    <div class="field-options">
                        <div class="field-option selected" id="room-construction" onclick="selectField('room', 'construction', '1502室')">
                            <div class="system-tag system-construction">住建局</div>
                            <div class="field-value">1502室</div>
                        </div>
                        <div class="field-option" id="room-heating" onclick="selectField('room', 'heating', '1502')">
                            <div class="system-tag system-heating">供热系统</div>
                            <div class="field-value">1502</div>
                        </div>
                        <div class="field-option" id="room-gas" onclick="selectField('room', 'gas', '1502号')">
                            <div class="system-tag system-gas">燃气系统</div>
                            <div class="field-value">1502号</div>
                        </div>
                        <div class="field-option standard-field" id="room-standard">
                            <div class="system-tag system-standard">标准字段</div>
                            <input type="text" class="standard-field-input" id="room-standard-input" 
                                   value="1502室" oninput="updateStandardField('room')">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <!-- 2. 标准地址详情卡片优化 -->
        <div class="address-info-card">
            <div class="address-header">
                <div class="address-title">
                    <h3><i class="fas fa-map-marked-alt"></i> 标准地址详情</h3>
                    <div class="address-meta">
                        <span class="status-pill status-pending" id="addressStatus">
                            <i class="fas fa-clock"></i> 待审核
                        </span>
                        <span class="address-id">编号: STD-2025-3501</span>
                    </div>
                </div>
                <div class="complete-address-container">
                    <div class="complete-address" id="completeAddress">
                        山东省济南市历下区泉城路街道泉城社区恒大名都8号楼2单元15层1502室
                    </div>
                    <button class="btn btn-sm btn-light copy-btn" onclick="copyAddress()">
                        <i class="fas fa-copy"></i> 复制
                    </button>
                </div>
            </div>
            
            <div class="address-body">
                <!-- 地图位置部分优化 -->
                <div class="address-section map-section">
                    <h4 class="section-title">
                        <i class="fas fa-map-location-dot"></i> 地图位置
                    </h4>
                    <div class="map-container">
                        <img src="https://api.map.baidu.com/staticimage/v2?ak=1NINMUrpbhQQnmgRMaeDCQ9WtCBOX4WG&width=800&height=400&center=117.021,36.6512&zoom=16&markers=117.021,36.6512" 
                             alt="地址位置地图" class="map-image">
                        <div class="map-overlay">
                            <div><i class="fas fa-location-dot"></i> <strong>经度：</strong>117.021</div>
                            <div><i class="fas fa-location-dot"></i> <strong>纬度：</strong>36.6512</div>
                        </div>
                        <div class="map-actions">
                            <button class="btn btn-sm btn-light" onclick="showFullMap()">
                                <i class="fas fa-expand"></i> 查看大图
                            </button>
                        </div>
                    </div>
                    <div class="map-info">
                        <div class="map-info-item">
                            <div class="info-label"><i class="fas fa-map-pin"></i> 所在位置</div>
                            <div class="info-value">山东省济南市历下区泉城路街道泉城社区恒大名都</div>
                        </div>
                        <div class="map-info-item">
                            <div class="info-label"><i class="fas fa-bullseye"></i> 定位精度</div>
                            <div class="info-value">
                                <span class="status-pill status-success">
                                    <i class="fas fa-check-circle"></i> 精确到楼栋
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 标签页切换 -->
        <div class="tab-container">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('changes')">变更内容</div>
                <div class="tab" onclick="switchTab('relations')">关联信息</div>
                <div class="tab" onclick="switchTab('history')">审核历史</div>
            </div>
            
            <div class="tab-content">
                <!-- 变更内容标签页 -->
                <div class="tab-pane active" id="changes">
                    <div class="info-block">
                        <div class="info-block-title">变更说明</div>
                        <p>本次提交修改了小区名称、楼栋号和单元号，以匹配实际现场调查结果。</p>
                    </div>
                    
                    <div class="info-block">
                        <div class="info-block-title">变更字段对比</div>
                        <table class="diff-table">
                            <thead>
                                <tr>
                                    <th width="150px">字段</th>
                                    <th>原值</th>
                                    <th>新值</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>小区/街坊</td>
                                    <td class="diff-old">中关村科技园</td>
                                    <td class="diff-new">中关村科技园B区</td>
                                </tr>
                                <tr>
                                    <td>楼栋号</td>
                                    <td class="diff-old">8栋</td>
                                    <td class="diff-new">8号楼</td>
                                </tr>
                                <tr>
                                    <td>单元号</td>
                                    <td class="diff-old">二单元</td>
                                    <td class="diff-new">2单元</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 关联信息标签页 -->
                <div class="tab-pane" id="relations">
                    <!-- 关联系统地址 -->
                    <div class="info-block">
                        <div class="info-block-title">关联的系统地址</div>
                        <div class="table-responsive">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th width="20%">系统来源</th>
                                        <th width="50%">系统地址</th>
                                        <th width="15%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class="system-tag system-construction">住建局</span>
                                        </td>
                                        <td>山东省济南市历下区泉城路街道泉城社区恒大名都8号楼2单元15层1502室</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showAddressDetail('construction-1001')">
                                                <i class="fas fa-info-circle"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="system-tag system-heating">供热系统</span>
                                        </td>
                                        <td>山东省济南市历下区泉城路街道泉城社区恒大名都8栋2单元15楼1502</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showAddressDetail('heating-1001')">
                                                <i class="fas fa-info-circle"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="system-tag system-gas">燃气系统</span>
                                        </td>
                                        <td>山东省济南市历下区泉城路街道泉城社区中关村科技园8号楼第2单元第15层1502号</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showAddressDetail('gas-1001')">
                                                <i class="fas fa-info-circle"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 关联的住户信息 -->
                    <div class="info-block">
                        <div class="info-block-title">关联的住户信息</div>
                        <div class="table-responsive">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th width="20%">姓名</th>
                                        <th width="15%">身份证号</th>
                                        <th width="15%">联系电话</th>
                                        <th width="20%">住户类型</th>
                                        <th width="15%">入住时间</th>
                                        <th width="15%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>张三</td>
                                        <td>3701********1234</td>
                                        <td>137****5678</td>
                                        <td>
                                            <span class="status-pill" style="background-color: #e3f2fd; color: #2196f3;">业主</span>
                                        </td>
                                        <td>2020-06-15</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showResidentDetail('resident-1001')">
                                                <i class="fas fa-user"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>李四</td>
                                        <td>3701********5678</td>
                                        <td>159****1234</td>
                                        <td>
                                            <span class="status-pill" style="background-color: #fff8e1; color: #ff9800;">租户</span>
                                        </td>
                                        <td>2023-01-10</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showResidentDetail('resident-1002')">
                                                <i class="fas fa-user"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 审核历史标签页 -->
                <div class="tab-pane" id="history">
                    <div class="history-timeline">
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-plus"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">创建标准地址</div>
                                <div class="history-desc">系统管理员创建了该标准地址</div>
                                <div class="history-date">2025-03-20 09:45:30</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-edit"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">修改地址信息</div>
                                <div class="history-desc">系统管理员修改了小区名称、楼栋号和单元号</div>
                                <div class="history-date">2025-03-20 10:15:45</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-paper-plane"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">提交审核</div>
                                <div class="history-desc">系统管理员提交了审核申请</div>
                                <div class="history-date">2025-03-20 10:20:12</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 标准地址预览 -->
        <div class="address-info-card">
            <div class="address-header">
                <div class="field-select-title">
                    <i class="fas fa-map-marker-alt"></i> 更新后的标准地址
                </div>
            </div>
            
            <div class="address-body">
                <div class="complete-address" id="standardAddressPreview">
                    山东省济南市历下区泉城路街道泉城社区恒大名都8号楼2单元15层1502室
                </div>
            </div>
        </div>
        
        <!-- 审核表单 -->
        <div class="approve-form">
            <h3 class="form-title">审核决定</h3>
            
            <div class="form-group">
                <label class="form-label">审核结果</label>
                <div class="radio-group">
                    <label class="radio-item">
                        <input type="radio" name="approveResult" value="approve" checked>
                        <span>通过</span>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="approveResult" value="reject">
                        <span>拒绝</span>
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">审核意见</label>
                <textarea class="form-control" rows="4" placeholder="请输入您的审核意见..." id="approveComment"></textarea>
            </div>
            
            <div class="form-actions">
                <button class="btn btn-default" onclick="navigateTo('pending-address-list.html', '待审核地址')">
                    取消
                </button>
                <button class="btn btn-primary" id="submitButton" onclick="submitApproval()">
                    提交审核结果
                </button>
            </div>
        </div>
    </div>
    
    <!-- 成功提示模态框 -->
    <div class="modal" id="successModal">
        <div class="modal-content">
            <div class="modal-header">
                <h4>保存成功</h4>
                <span class="close" onclick="closeModal('successModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <p>您已成功提交审核结果</p>
                <p>审核结果已保存</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="navigateTo('pending-address-list.html', '待审核地址')">返回列表</button>
            </div>
        </div>
    </div>

    <script>
        // 存储当前选择的字段
        const selectedFields = {
            province: { source: 'construction', value: '山东省' },
            city: { source: 'construction', value: '济南市' },
            district: { source: 'construction', value: '历下区' },
            street: { source: 'construction', value: '泉城路街道' },
            community: { source: 'construction', value: '泉城社区' },
            neighborhood: { source: 'heating', value: '恒大名都' },
            building: { source: 'gas', value: '8号楼' },
            unit: { source: 'heating', value: '2单元' },
            floor: { source: 'construction', value: '15层' },
            room: { source: 'construction', value: '1502室' },
            aux: { source: '', value: '' }
        };
        
        // 标准地址字段值
        const standardFields = {
            province: '山东省',
            city: '济南市', 
            district: '历下区',
            street: '泉城路街道',
            community: '泉城社区',
            neighborhood: '恒大名都',
            building: '8号楼',
            unit: '2单元',
            floor: '15层',
            room: '1502室',
            aux: ''
        };
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化选中的字段
            updateFieldSelections();
            
            // 初始化标准地址预览
            updateStandardAddressPreview();
            
            // 绑定保存按钮事件
            document.getElementById('saveSelectionsBtn').addEventListener('click', function() {
                submitApproval();
            });
            
            // 绑定重置按钮事件
            document.getElementById('resetSelectionsBtn').addEventListener('click', function() {
                resetFieldSelections();
            });
        });
        
        // 选择字段
        function selectField(fieldName, source, value) {
            // 更新选择状态
            selectedFields[fieldName] = {
                source: source,
                value: value
            };
            
            // 更新标准字段值
            standardFields[fieldName] = value;
            document.getElementById(`${fieldName}-standard-input`).value = value;
            
            // 更新UI显示
            updateFieldSelections();
            
            // 更新标准地址预览
            updateStandardAddressPreview();
        }
        
        // 更新标准字段
        function updateStandardField(fieldName) {
            const value = document.getElementById(`${fieldName}-standard-input`).value.trim();
            
            if (value) {
                // 更新标准字段值
                standardFields[fieldName] = value;
                
                // 更新标准地址预览
                updateStandardAddressPreview();
            }
        }
        
        // 更新字段选择UI
        function updateFieldSelections() {
            // 对每个字段
            for (const fieldName in selectedFields) {
                const field = selectedFields[fieldName];
                
                // 清除该字段所有选中状态
                const options = document.querySelectorAll(`#${fieldName}-construction, #${fieldName}-heating, #${fieldName}-gas`);
                options.forEach(option => {
                    option.classList.remove('selected');
                });
                
                // 根据来源选中对应的选项
                if (field && field.source !== 'standard') {
                    const option = document.getElementById(`${fieldName}-${field.source}`);
                    if (option) {
                        option.classList.add('selected');
                    }
                }
            }
        }
        
        // 更新标准地址预览
        function updateStandardAddressPreview() {
            // 构建标准地址
            let standardAddress = '';
            
            // 按顺序添加各个字段
            const fieldOrder = ['province', 'city', 'district', 'street', 'community', 'neighborhood', 'building', 'unit', 'floor', 'room', 'aux'];
            
            fieldOrder.forEach(fieldName => {
                if (standardFields[fieldName]) {
                    standardAddress += standardFields[fieldName];
                }
            });
            
            // 更新预览
            document.getElementById('standardAddressPreview').textContent = standardAddress;
            document.getElementById('completeAddress').textContent = standardAddress;
        }
        
        // 重置字段选择
        function resetFieldSelections() {
            // 恢复默认选择
            selectedFields.province = { source: 'construction', value: '山东省' };
            selectedFields.city = { source: 'construction', value: '济南市' };
            selectedFields.district = { source: 'construction', value: '历下区' };
            selectedFields.street = { source: 'construction', value: '泉城路街道' };
            selectedFields.community = { source: 'construction', value: '泉城社区' };
            selectedFields.neighborhood = { source: 'heating', value: '恒大名都' };
            selectedFields.building = { source: 'gas', value: '8号楼' };
            selectedFields.unit = { source: 'heating', value: '2单元' };
            selectedFields.floor = { source: 'construction', value: '15层' };
            selectedFields.room = { source: 'construction', value: '1502室' };
            selectedFields.aux = { source: '', value: '' };
            
            // 恢复标准字段值
            standardFields.province = '山东省';
            standardFields.city = '济南市';
            standardFields.district = '历下区';
            standardFields.street = '泉城路街道';
            standardFields.community = '泉城社区';
            standardFields.neighborhood = '恒大名都';
            standardFields.building = '8号楼';
            standardFields.unit = '2单元';
            standardFields.floor = '15层';
            standardFields.room = '1502室';
            standardFields.aux = '';
            
            // 更新所有标准字段输入框
            for (const fieldName in standardFields) {
                const input = document.getElementById(`${fieldName}-standard-input`);
                if (input) {
                    input.value = standardFields[fieldName];
                }
            }
            
            // 更新UI显示
            updateFieldSelections();
            
            // 更新标准地址预览
            updateStandardAddressPreview();
        }
        
        // 切换标签页
        function switchTab(tabId) {
            // 隐藏所有标签页内容
            const tabPanes = document.querySelectorAll('.tab-pane');
            tabPanes.forEach(pane => pane.classList.remove('active'));
            
            // 取消选中所有标签
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            
            // 显示选中的标签页内容
            document.getElementById(tabId).classList.add('active');
            
            // 选中对应的标签
            const currentTabIndex = tabId === 'changes' ? 0 : (tabId === 'relations' ? 1 : 2);
            tabs[currentTabIndex].classList.add('active');
        }
        
        // 提交审核结果
        function submitApproval() {
            const result = document.querySelector('input[name="approveResult"]:checked').value;
            const comment = document.getElementById('approveComment').value.trim();
            
            // 构建审核数据
            const approvalData = {
                addressId: '1001',
                result: result,
                comment: comment,
                standardFields: standardFields,
                selectedSources: {}
            };
            
            // 记录每个字段选择的来源
            for (const fieldName in selectedFields) {
                approvalData.selectedSources[fieldName] = selectedFields[fieldName].source;
            }
            
            console.log('提交审核结果：', approvalData);
            
            // 显示成功模态框
            showModal('successModal');
        }
        
        // 显示模态框
        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = ''; // 恢复背景滚动
            }
        }
        
        // 显示全屏地图
        function showFullMap() {
            // 创建模态框
            const mapModal = document.createElement('div');
            mapModal.className = 'modal';
            mapModal.id = 'mapModal';
            mapModal.style.display = 'flex';
            
            mapModal.innerHTML = `
                <div class="modal-content" style="width: 90%; max-width: 1000px;">
                    <div class="modal-header">
                        <h4>地址位置地图</h4>
                        <span class="close" onclick="closeModal('mapModal')">&times;</span>
                    </div>
                    <div class="modal-body" style="padding: 0;">
                        <div style="height: 500px; position: relative;">
                            <img src="https://api.map.baidu.com/staticimage/v2?ak=1NINMUrpbhQQnmgRMaeDCQ9WtCBOX4WG&width=1000&height=1000&center=117.021,36.6512&zoom=18&markers=117.021,36.6512" 
                                 alt="地址位置地图" style="width: 100%; height: 100%; object-fit: cover;">
                            <div class="map-overlay" style="position: absolute; bottom: 10px; right: 10px; background-color: rgba(255,255,255,0.8); padding: 10px 15px; border-radius: 4px; font-size: 14px;">
                                <div><strong>经度：</strong>117.021</div>
                                <div><strong>纬度：</strong>36.6512</div>
                                <div><strong>地址：</strong>山东省济南市历下区泉城路街道泉城社区恒大名都8号楼</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal('mapModal')">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(mapModal);
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        // 显示地址详情
        function showAddressDetail(addressId) {
            // 创建模态框
            const addressModal = document.createElement('div');
            addressModal.className = 'modal';
            addressModal.id = 'addressDetailModal';
            addressModal.style.display = 'flex';
            
            // 根据地址ID获取不同的标题
            let systemName = '住建局';
            if (addressId.startsWith('heating')) {
                systemName = '供热系统';
            } else if (addressId.startsWith('gas')) {
                systemName = '燃气系统';
            }
            
            addressModal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>${systemName}地址详情</h4>
                        <span class="close" onclick="closeModal('addressDetailModal')">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div class="info-row">
                            <div class="info-label">系统来源</div>
                            <div class="info-value">${systemName}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">系统ID</div>
                            <div class="info-value">${addressId}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">完整地址</div>
                            <div class="info-value">山东省济南市历下区泉城路街道泉城社区恒大名都8号楼2单元15层1502室</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">最后更新</div>
                            <div class="info-value">2024-05-20 14:30:45</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">数据状态</div>
                            <div class="info-value">
                                <span class="status-pill" style="background-color: #e8f5e9; color: #4caf50;">有效</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal('addressDetailModal')">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(addressModal);
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        // 显示住户详情
        function showResidentDetail(residentId) {
            // 创建模态框
            const residentModal = document.createElement('div');
            residentModal.className = 'modal';
            residentModal.id = 'residentDetailModal';
            residentModal.style.display = 'flex';
            
            // 根据ID获取姓名
            let residentName = residentId.includes('1001') ? '张三' : '李四';
            let residentType = residentId.includes('1001') ? '业主' : '租户';
            
            residentModal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>住户信息详情</h4>
                        <span class="close" onclick="closeModal('residentDetailModal')">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div class="info-row">
                            <div class="info-label">姓名</div>
                            <div class="info-value">${residentName}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">住户类型</div>
                            <div class="info-value">${residentType}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">联系电话</div>
                            <div class="info-value">137****5678</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">身份证号</div>
                            <div class="info-value">3701********1234</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">入住时间</div>
                            <div class="info-value">2020-06-15</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal('residentDetailModal')">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(residentModal);
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        // 显示设备详情
        function showDeviceDetail(deviceId) {
            // 创建模态框
            const deviceModal = document.createElement('div');
            deviceModal.className = 'modal';
            deviceModal.id = 'deviceDetailModal';
            deviceModal.style.display = 'flex';
            
            // 根据ID获取设备类型
            let deviceType = '供热表';
            let deviceNo = 'HR20231502';
            
            if (deviceId.includes('1002')) {
                deviceType = '燃气表';
                deviceNo = 'GZ20231502';
            } else if (deviceId.includes('1003')) {
                deviceType = '水表';
                deviceNo = 'WB20231502';
            }
            
            deviceModal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>设备表具详情</h4>
                        <span class="close" onclick="closeModal('deviceDetailModal')">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div class="info-row">
                            <div class="info-label">设备类型</div>
                            <div class="info-value">${deviceType}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">设备编号</div>
                            <div class="info-value">${deviceNo}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">品牌型号</div>
                            <div class="info-value">智能${deviceType} S2000</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">当前读数</div>
                            <div class="info-value">1245.6</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">最后抄表时间</div>
                            <div class="info-value">2024-05-15 10:20:30</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">安装位置</div>
                            <div class="info-value">入户门内右侧</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal('deviceDetailModal')">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(deviceModal);
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        // 复制地址到剪贴板
        function copyAddress() {
            const addressText = document.getElementById('completeAddress').textContent.trim();
            
            // 创建临时文本域
            const textarea = document.createElement('textarea');
            textarea.value = addressText;
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            
            // 选择并复制文本
            textarea.select();
            document.execCommand('copy');
            
            // 移除临时元素
            document.body.removeChild(textarea);
            
            // 显示提示
            showCopyTooltip();
        }

        // 显示复制成功提示
        function showCopyTooltip() {
            const button = document.querySelector('.copy-btn');
            const originalHTML = button.innerHTML;
            
            // 更改按钮文本
            button.innerHTML = '<i class="fas fa-check"></i> 已复制';
            button.classList.add('btn-success');
            
            // 2秒后恢复
            setTimeout(() => {
                button.innerHTML = originalHTML;
                button.classList.remove('btn-success');
            }, 2000);
        }
    </script>
</body>
</html> 